<template>
  <div class="myCusEdit-container" v-loading="loading">
    <!-- 人事信息 -->
    <el-row class="filterCondition">
      <el-form label-width="82px" label-position="right" :model="formLabelAlign">
        <!-- 展示区域 只展示 不可编辑-->
        <el-col :span="3">
          <div class="grid-content miaoshu col-first row-first">姓名：</div>
        </el-col>
        <!-- <el-col :span="5"><div class="grid-content  content row-first">{{formLabelAlign.name}}<el-input v-model="input" placeholder="请输入内容"></el-input></div></el-col> -->
        <el-col :span="5">
          <div class="grid-content content row-first">
            <el-input
              id="nameInput"
              v-model="formLabelAlign.name"
              :disabled="this.disName"
              placeholder="请输入姓名"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu row-first">性别：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content row-first">{{formLabelAlign.sex}}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu row-first">年龄：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content col-last row-first">{{formLabelAlign.age | panDuanAge}}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu col-first">手机号：</div>
        </el-col>
        <el-col :span="5" v-if="showPhone">
          <div class="grid-content content">{{formLabelAlign.phone | phoneNum}}</div>
        </el-col>
        <el-col :span="5" v-if="!showPhone">
          <div class="grid-content content">{{formLabelAlign.phone | phoneFeiKong}}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu">申请额度：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content">{{formLabelAlign.linesCount}}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu">城市：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content col-last">{{formLabelAlign.city | panDuanCity}}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu col-first">车：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content">{{formLabelAlign.car | JudgeBoolean}}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu">公积金：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content">{{formLabelAlign.accumulation | JudgeBoolean}}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu">代发：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content col-last">{{formLabelAlign.isbankpay | JudgeBoolean }}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu col-first">社保：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content">{{formLabelAlign.socialSecurity | JudgeBoolean }}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu">保单：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content">{{formLabelAlign.lifeSecurity | JudgeBoolean}}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu">房产：</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content content col-last">{{formLabelAlign.room | JudgeBoolean}}</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content miaoshu col-first row-last">待确认资质：</div>
        </el-col>
        <el-col :span="19">
          <div class="grid-content content row-last">{{formLabelAlign.qualification}}</div>
        </el-col>
        <!-- <el-col :span="3"><div class="grid-content  miaoshu row-last"></div></el-col>
        <el-col :span="5"><div class="grid-content  content row-last"></div></el-col>
        <el-col :span="3"><div class="grid-content  miaoshu row-last"></div></el-col>
        <el-col :span="5"><div class="grid-content  content row-last col-last "></div></el-col>-->
      </el-form>
    </el-row>
    <!-- 资质与状态 -->
    <el-row class="filterCondition">
      <el-form label-width="82px" label-position="right" :model="formLabelAlign">
        <el-form-item class="dangan" label="状态">
          <el-tooltip placement="top" effect="light">
            <div slot="content">
              <span style="font-size:16px;font-weight:700">状态是客户申请所处的环节：</span>
              <br />1.
              <span style="color:red">已受理</span>-说明：新申请数据，还未联系客户；
              <br />2.
              <span style="color:red">待跟进</span>-说明：已联系，但未了解客户信息；
              <br />3.
              <span style="color:red">未接通</span>-说明：已致电，但未接通电话；
              <br />4.
              <span style="color:red">贷款资质不符</span>-说明：该客户或身边人士无可贷点；
              <br />5.
              <span style="color:red">捣乱申请</span>-说明：同行或者申请人恶意提交的不实申请；
              <br />6.
              <span style="color:red">待签约</span>-说明：联系后，并判定该客户或身边人士有可贷点；
              <br />7.
              <span style="color:red">已上门</span>-说明：已上门，但未签约；
              <br />8.
              <span style="color:red">已签约</span>-说明：已上门签约；
              <br />9.
              <span style="color:red">审核中</span>-说明：客户已经完成进件，银行审核中，请备注进件银行、申请金额、审核进度；
              <br />10.
              <span style="color:red">银行已放款</span>-说明：银行审批结束，批放款成功，请备注放款银行、到账金额；
              <br />银行已拒绝-说明：银行审批结束，贷款被拒（包含初审），请备注被拒的原因；
            </div>
            <el-select v-model="formLabelAlign.state" @change="ShowXingJi" placeholder="请选择状态">
              <el-option
                v-for="item in statusList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-tooltip>
        </el-form-item>
        <el-form-item class="dangan" label="星级">
          <el-tooltip placement="top" effect="light">
            <div slot="content">
              <span style="font-size:16px;font-weight:700">星级是对客户贷款资质的客观评价：</span>
              <br />
              <span style="color:red">0星：</span>系统默认的未了解过信息的客户；
              <br />
              <span style="color:red">1星：</span>本人或身边朋友无可贷点的客户；
              <br />
              <span style="color:red">2星：</span>本人或身边朋友有可贷点但暂时进不了件的客户；
              <br />
              <span style="color:red">2星+：</span>本人或身边朋友有可贷点，但只能进小贷的客户；
              <br />
              <span style="color:red">3星：</span>本人或身边朋友有可贷点，并可以进银行及主流金融机构的客户；
              <br />
              <span style="color:red">4星：</span>本人或身边有可贷点，且马上需要或条件优质的客户（放款客户默认4星）。
            </div>
            <el-select v-model="formLabelAlign.level" placeholder="请选择星级">
              <el-option label="0星" value="0" v-show="isShowStar.lingXing"></el-option>
              <el-option label="1星" value="1" v-show="isShowStar.YiXing"></el-option>
              <el-option label="2星" value="2" v-show="isShowStar.ErXing"></el-option>
              <el-option label="2星+" value="3" v-show="isShowStar.ErXingJia"></el-option>
              <el-option label="3星" value="4" v-show="isShowStar.SanXing"></el-option>
              <el-option label="4星" value="5" v-show="isShowStar.SiXing"></el-option>
            </el-select>
          </el-tooltip>
        </el-form-item>
        <br />
        <el-form-item class="dangan" label="资质" id="zizhi">
          <el-input
            id="nianxian"
            type="textarea"
            :rows="3"
            placeholder="请输入资质内容"
            v-model="formLabelAlign.remarks"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 档案信息 -->
    <el-row class="filterCondition downOne">
      <el-form label-width="82px" label-position="right" :model="formLabelAlign">
        <!-- <el-form-item class="dangan" label="备忘">
          <div class="block" id="dateOfBirth">
            <el-date-picker v-model="beiwang" type="date" disabled></el-date-picker>
          </div>
        </el-form-item> 
        <el-form-item class="dangan momecontent" label="">
          <el-input v-model="beiwang" disabled></el-input>
        </el-form-item>
        <el-button type="warning" id="addnote" disabled >添加备忘</el-button>-->
        <el-form-item class="dangan" label="回访时间">
          <div class="block" id="dateOfBirth">
            <!-- <el-date-picker v-model="formLabelAlign.returnVisitTime" type="date"></el-date-picker> -->
            <el-date-picker
              v-model="formLabelAlign.returnVisitTime"
              type="datetime"
              placeholder="选择跟进时间"
            ></el-date-picker>
          </div>
        </el-form-item>
        <br />

        <el-form-item class="dangan" label="备注" id="zizhi">
          <el-input
            id="nianxian"
            type="textarea"
            :rows="3"
            placeholder="请输入备注内容"
            v-model="noteContent"
          ></el-input>
        </el-form-item>
        <el-button
          type="primary"
          style="margin-left:90px"
          class="addbeizhu"
          @click="addBeizhu"
          :disabled="disTBN"
        >提交编辑内容</el-button>
        <el-button
          type="primary"
          style="margin-left:90px"
          class="addbeizhu"
          v-show="OnlyShowMyCus"
          @click="NextMyCus"
          :disabled="disTBN"
        >下一个我的客户</el-button>
        <el-button
          type="primary"
          style="margin-left:90px"
          class="addbeizhu"
          v-show="showaddMyCus"
          @click="NextReCus"
        >下一个再分配客户</el-button>
        <br />
        <el-form-item class="dangan" label="跟进记录">
          <div id="noteList">
            <ul>
              <li
                v-for="(item,index) in formLabelAlign.noteList"
                :key="index"
                v-bind:style="{'color': item.otherUser == 1 ? 'red':'#606266'}"
              >
                <span
                  v-bind:style="{'color': item.otherUser == 1 ? '#898989':'#898989'}"
                >{{++index}}--{{ item.createDate | formatTime}}</span>
                {{ item.userName}}--{{ item.content}}
              </li>
            </ul>
          </div>
          <!-- <span style="color:red">仅需回复上级备注</span>
          <el-table :data="formLabelAlign.noteList" style="width: 100%" border stripe size="mini">
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="userName" label="操作人" width="80"></el-table-column>
            <el-table-column  label="备注内容" width="400">
              <template slot-scope="scope">
                <span v-bind:style="{'color': scope.row.otherUser == 1 ? 'red':'#606266'}">
                  {{scope.row.content }}
                </span>

              </template>
            </el-table-column>
            <el-table-column prop="reply" label="回复内容" min-width="200"></el-table-column>
            <el-table-column label="操作日期" width="200">
              <template slot-scope="scope">
                {{scope.row.createDate |formatTime}}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button @click="Reply(scope.row.id)" type="text">回复</el-button>
              </template>
            </el-table-column>
          </el-table>-->
        </el-form-item>
        <el-button
          type="danger"
          style="margin-left:90px"
          class="addbeizhu"
          v-show="showaddMyCus"
          @click="addMyCusList"
          :disabled="disTBN"
        >加入我的客户</el-button>
        <el-button
          type="success"
          style="margin-left:90px"
          class="addbeizhu"
          v-show="showaddMyCus"
          @click="addGGC"
          :disabled="disTBN"
        >加入公共池</el-button>
        <br />
        <el-form-item class="dangan" label="流转记录">
          <div id="liuZhuanNote">
            <ul>
              <li v-for="(item,index) in this.liuZhuanNote" :key="index">
                <p style="margin:0" v-if="item.type == 0 ">
                  {{++index}}--{{ item.createDate | formatTime}}--{{ item.type | fenPeiWay }}
                  <span
                    style="color:red"
                  >{{ item.userName }}</span>
                  {{ item.operationName | cuoZuoRen}}
                </p>
                <p style="margin:0" v-else-if="item.type == 1 ">
                  {{++index}}--{{ item.createDate | formatTime}}--{{ item.type | fenPeiWay }}
                  <span
                    style="color:red"
                  >{{ item.userName }}</span>
                  {{ item.operationName | cuoZuoRen}}
                </p>
                <p style="margin:0" v-else-if="item.type == 2 ">
                  {{++index}}--{{ item.createDate | formatTime}}--{{ item.type | fenPeiWay }}
                  <span
                    style="color:red"
                  >{{ item.departmentName }}</span>
                  {{ item.operationName | cuoZuoRen}}
                </p>
                <p style="margin:0" v-else-if="item.type == 3 ">
                  {{++index}}--{{ item.createDate | formatTime}}--
                  <span
                    style="color:#7e2686"
                  >{{ item.type | fenPeiWay }}</span>
                </p>
                <p style="margin:0" v-else>
                  {{++index}}--{{ item.createDate | formatTime}}--{{ item.type | fenPeiWay }}
                  <span
                    style="color:red"
                  >{{ item.userName }}</span>
                  {{ item.operationName | cuoZuoRen}}
                </p>
              </li>
            </ul>
          </div>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { setInterval } from "timers";
import moment from "moment";
import { mapMutations } from "vuex";
import $ from "jquery";
export default {
  name: "myCusEdit",
  // 数据
  data() {
    return {
      currentUser: {
        currentName: "",
        currentId: "",
        currentLevel: "",
        currentPhone: "",
      },
      disName: false, //姓名是否禁用
      loading: false,
      showaddMyCus: false,
      OnlyShowMyCus: false, //仅从我的客户跳转时显示
      showPhone: false,
      MyCusIdList: [],
      ReCusIdList: [],
      //备忘
      beiwang: "This is beiwang!!!",
      //备注
      noteContent: "",
      //进度动态生成内容
      statusList: [
        { id: "已受理", name: "已受理" },
        { id: "未接通", name: "未接通" },
        { id: "待跟进", name: "待跟进" },
        { id: "资质不符", name: "资质不符" },
        { id: "待签约", name: "待签约" },
        { id: "已上门", name: "已上门" },
        { id: "已签约", name: "已签约" },
        { id: "审核中", name: "审核中" },
        { id: "已放款", name: "已放款" },
        { id: "已拒批", name: "已拒批" },
        { id: "捣乱申请", name: "捣乱申请" },
        { id: "重复申请", name: "重复申请" },
        { id: "外地申请", name: "外地申请" },
      ],
      isShowStar: {
        lingXing: false,
        YiXing: false,
        ErXing: false,
        ErXingJia: false,
        SanXing: false,
        SiXing: false,
      },
      //备注
      noteList: "This is note things!!!",
      liuZhuanNote: [{ content: "该客户没有流转记录" }],
      //图片
      imageUrl: "",
      //客户id
      localCusId: "",
      //禁用按钮的状态值
      disTBN: false,
      //客户筛选区域数据
      formLabelAlign: {
        id: "",
        name: "张三（网络请求失败时显示）",
        phone: "138XXXXXXXX",
        sex: "",
        state: "",
        level: "", //星级
        age: "",
        isUse: 0,
        userId: null,
        userName: null,
        zaiFenPei: false,
        poolData: false,
        room: "", //房产
        car: "",
        socialSecurity: false,
        lifeSecurity: false,
        accumulation: false,
        isbankpay: false,
        linesCount: "",
        city: "",
        sourceCustomer: null,
        sourceId: "",
        noteList: [{ content: "还没有给该客户添加任何备注" }],
        source: null,
        stateName: "",
        remarks: "",
        noteContent: "",
        newData: true,
        returnVisitTime: "", // 客户再回访时间
      },
      dianPing: "",
    };
  },
  methods: {
    //回复操作
    Reply(id) {
      this.$prompt("请回复消息", "回复", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\S/,
        inputErrorMessage: "输入不为空",
      })
        .then(({ value }) => {
          this.$axios
            .get(
              `/spider/note/updateByReply?noteId=${id}&reply=${value}&userId=${window.sessionStorage.getItem(
                "id"
              )}`
            )
            .then((res) => {
              if (res.data.messageModel.code == 0) {
                this.$message.success("操作成功");
                this.getEditCus();
              } else {
                this.$message.error(res.data.messageModel.messageText);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    //获取客户信息的方法
    getEditCus() {
      //获取客户信息
      this.$axios
        .get(
          `/spider/customer/getCustomerById?id=${
            this.localCusId
          }&phone=${window.sessionStorage.getItem(
            "phone"
          )}&userId=${window.sessionStorage.getItem(
            "id"
          )}&password=${window.sessionStorage.getItem("password")}`
        ) //正常请求
        .then((res) => {
          // console.log(res);
          if (res.data.messageModel.code == 0) {
            this.$message.success(
              "已为您显示客户信息，请开始编辑该用户(#^.^#)"
            );
            this.formLabelAlign = res.data.dataModel;
            // 通过来源判断是否允许编辑
            if (
              this.formLabelAlign.sourceId == 254 ||
              this.formLabelAlign.sourceId == 263 ||
              this.formLabelAlign.sourceId == 280 ||
              this.formLabelAlign.sourceId == 294 ||
              this.formLabelAlign.sourceId == 297 ||
              this.formLabelAlign.sourceId == 294 ||
              this.formLabelAlign.sourceId == 333 ||
              this.formLabelAlign.sourceId == "254" ||
              this.formLabelAlign.sourceId == "263" ||
              this.formLabelAlign.sourceId == "294" ||
              this.formLabelAlign.sourceId == "297" ||
              this.formLabelAlign.sourceId == "284" ||
              this.formLabelAlign.sourceId == "333" ||
              this.formLabelAlign.sourceId == "280"
            ) {
              this.disName = false;
            } else {
              this.disName = true;
            }
            //后端给的布尔值和星级数据无法直接渲染需要翻译
            // let level = res.data.dataModel.level
            if (res.data.dataModel.level == 0) {
              this.formLabelAlign.level = "0星";
            } else if (res.data.dataModel.level == 1) {
              this.formLabelAlign.level = "1星";
            } else if (res.data.dataModel.level == 2) {
              this.formLabelAlign.level = "2星";
            } else if (res.data.dataModel.level == 3) {
              this.formLabelAlign.level = "2星+";
            } else if (res.data.dataModel.level == 4) {
              this.formLabelAlign.level = "3星";
            } else if (res.data.dataModel.level == 5) {
              this.formLabelAlign.level = "4星";
            } else {
              this.formLabelAlign.level = "还未设置星级";
            }
            if (this.formLabelAlign.remarks == "null") {
              this.formLabelAlign.remarks = "";
            }
            if (this.formLabelAlign.userId != this.currentUser.currentid) {
              this.showPhone = true;
              this.dianPing = "dianPing";
            } else {
              this.showPhone = false;
              this.dianPing = "";
            }
            if (
              this.formLabelAlign.returnVisitTime == undefined &&
              this.formLabelAlign.returnVisitTime == null
            ) {
              this.formLabelAlign.returnVisitTime = "";
            }
            this.loading = false;
          } else {
            this.$message.error(res.data.messageModel.messageText);
            this.loading = false;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 获取未处理的数据数量
    getUnread() {
      this.disButton();
      this.$axios
        .get(
          `/spider/customer/getCusCount?userId=${this.currentUser.currentid}`
        )
        .then((res) => {
          if (res.data.messageModel.code != 0) {
            this.$message.error(res.data.messageModel.messageText);
          } else {
            this.$store.commit("getUnread", res.data.dataModel);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //获取流转记录
    getLiuZhuanNote() {
      this.$axios
        .get(`/spider/customer/getDisList?customerId=${this.localCusId}`)
        .then((res) => {
          // console.log(res);
          if (res.data.messageModel.code == 0) {
            this.liuZhuanNote = res.data.dataModel;
          } else {
            this.$message.error(res.data.messageModel.messageText);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //提交备注内容
    addBeizhu() {
      if (
        this.formLabelAlign.sourceId == 254 ||
        this.formLabelAlign.sourceId == 263 ||
        this.formLabelAlign.sourceId == 280 ||
        this.formLabelAlign.sourceId == "254" ||
        this.formLabelAlign.sourceId == "263" ||
        this.formLabelAlign.sourceId == "280"
      ) {
        //判断姓名是否包含特殊字符的判断
        var regEn = /[`!@#$%^&*()_+<>?:"{},.\/;'[\]]/im;
        var regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
        if (
          regEn.test(this.formLabelAlign.name) ||
          regCn.test(this.formLabelAlign.name)
        ) {
          this.$message.error("您在客户姓名框输入了非法字符，请重新输入");
          return false;
        }
      }
      this.disButton();
      // console.log(this.formLabelAlign.remarks);
      if (
        this.formLabelAlign.returnVisitTime != undefined &&
        this.formLabelAlign.returnVisitTime != null
      ) {
        this.formLabelAlign.returnVisitTime = moment(
          this.formLabelAlign.returnVisitTime
        ).format("YYYY-MM-DD HH:mm:ss");
      }
      if (
        this.formLabelAlign.returnVisitTime == undefined ||
        this.formLabelAlign.returnVisitTime == "null" ||
        this.formLabelAlign.returnVisitTime == "Invalid date"
      ) {
        this.formLabelAlign.returnVisitTime = "";
      }
      if (this.formLabelAlign.state == "") {
        this.$message.error("您还没选择客户状态");
        return false;
      } else if (
        (this.formLabelAlign.level != 0 &&
          this.formLabelAlign.level != "0星" &&
          this.formLabelAlign.remarks == "") ||
        (this.formLabelAlign.level != 0 &&
          this.formLabelAlign.level != "0星" &&
          this.formLabelAlign.remarks == null)
      ) {
        this.$message.error("非0星状态下，资质内容不得为空");
        return false;
      } else if (
        this.formLabelAlign.level != 0 &&
        this.formLabelAlign.level != "0星" &&
        this.formLabelAlign.remarks.length <= 10
      ) {
        this.$message.error("非0星状态下，资质内容不得少于十个字符");
        return false;
      }
      if (this.formLabelAlign.level == "") {
        this.$message.error("星级不可为空");
        return false;
      }
      //翻译后再传给后端
      let level = this.formLabelAlign.level;
      if (
        typeof this.formLabelAlign.level === "number" &&
        !isNaN(this.formLabelAlign.level)
      ) {
        this.formLabelAlign.level = this.formLabelAlign.level;
      } else {
        if (
          this.formLabelAlign.level == "0星" ||
          this.formLabelAlign.level == 0
        ) {
          this.formLabelAlign.level = 0;
        } else if (this.formLabelAlign.level == "1星") {
          this.formLabelAlign.level = 1;
        } else if (this.formLabelAlign.level == "2星") {
          this.formLabelAlign.level = 2;
        } else if (this.formLabelAlign.level == "2星+") {
          this.formLabelAlign.level = 3;
        } else if (this.formLabelAlign.level == "3星") {
          this.formLabelAlign.level = 4;
        } else if (this.formLabelAlign.level == "4星") {
          this.formLabelAlign.level = 5;
        } else {
          this.formLabelAlign.level = this.formLabelAlign.level;
        }
      }
      //解决+号被解析为空格的问题
      var reg = /^[a-zA-Z0-9\-\+]+$/i;
      let noteContentStr = this.noteContent;
      let remarksStr = this.formLabelAlign.remarks;
      if (reg.test(this.noteContent) != -1) {
        noteContentStr = encodeURI(noteContentStr).replace(/\+/g, "%2B");
      }
      if (reg.test(this.formLabelAlign.remarks) != -1) {
        remarksStr = encodeURI(remarksStr).replace(/\+/g, "%2B");
      }
      window.console.log(noteContentStr);
      window.console.log(remarksStr);
      this.$axios
        .post(
          `/spider/customer/updateCustomer?name=${this.formLabelAlign.name}&id=${this.localCusId}&userId=${this.currentUser.currentid}&returnVisitTime=${this.formLabelAlign.returnVisitTime}&level=${this.formLabelAlign.level}&state=${this.formLabelAlign.state}&remarks=${remarksStr}&noteContent=${noteContentStr}&type=${this.dianPing}`
        )
        .then((res) => {
          // console.log(res);
          if (res.data.messageModel.code == 0) {
            this.$message.success("成功提交新的备注信息(#^.^#)");
            this.getUnread();
            this.getEditCus();
            this.noteContent = "";
            this.formLabelAlign.remarks = "";
          } else {
            this.$message.error(res.data.messageModel.messageText);
            this.noteContent = "";
            // this.noteContent = ""
            this.getUnread();
            this.getEditCus();
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //将按钮禁用两秒
    disButton() {
      this.disTBN = true;
      setTimeout(() => {
        this.disTBN = false;
      }, 2000);
    },
    //加入我的客户
    addMyCusList() {
      this.disButton();
      this.$axios
        .post(`/spider/customer/addToMyCustomer?id=${this.localCusId}`)
        .then((res) => {
          // console.log(res);
          if (res.data.messageModel.code == 0) {
            this.$message.success("您已成功添加该客户到您的客户(#^.^#)");
          } else {
            this.$message.error("提交失败，请稍后重试┭┮﹏┭┮");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //加入公共池
    addGGC() {
      this.disButton();
      this.$axios
        .post(
          `/spider/customer/addToPool?operationId=${this.currentUser.currentid}&customerId=${this.$route.query.CusId}`
        )
        .then((res) => {
          // console.log(res);
          if (res.data.messageModel.messageText == "修改成功") {
            this.$message({
              message: "已将选中的客户成功添加到公共池",
              type: "success",
            });
          } else {
            this.$message.error("添加失败/(ㄒoㄒ)/~~");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //获取进度 控制隐藏和现实
    ShowXingJi(vId) {
      this.formLabelAlign.level = "";
      let obj = {};
      obj = this.statusList.find((item) => {
        return item.id === vId; //筛选出匹配数据
      });
      // console.log(obj.name);
      if (
        obj.name == "已受理" ||
        obj.name == "未接通" ||
        obj.name == "待跟进"
      ) {
        for (let key in this.isShowStar) {
          this.isShowStar[key] = false;
        }
        this.isShowStar.lingXing = true;
      } else if (obj.name == "资质不符" || obj.name == "捣乱申请") {
        for (let key in this.isShowStar) {
          this.isShowStar[key] = false;
        }
        this.isShowStar.YiXing = true;
      } else if (
        obj.name == "待签约" ||
        obj.name == "已签约" ||
        obj.name == "审核中" ||
        obj.name == "已放款" ||
        obj.name == "已拒批"
      ) {
        for (let key in this.isShowStar) {
          this.isShowStar[key] = true;
        }
        this.isShowStar.lingXing = false;
        this.isShowStar.YiXing = false;
      } else if (
        obj.name == "已上门" ||
        obj.name == "重复申请" ||
        obj.name == "外地申请"
      ) {
        for (let key in this.isShowStar) {
          this.isShowStar[key] = true;
        }
        this.isShowStar.lingXing = false;
      } else {
        for (let key in this.isShowStar) {
          this.isShowStar[key] = false;
        }
      }
    },
    //渲染下一个客户的方法
    NextMyCus() {
      if (this.MyCusIdList) {
        //判断当前客户ID是否存在于本地存储的表中 && 不是数组中最后一个客户
        if (
          this.MyCusIdList.indexOf(this.localCusId.toString()) != -1 &&
          this.MyCusIdList.indexOf(this.localCusId.toString()) + 1 !=
            this.MyCusIdList.length
        ) {
          let index = this.MyCusIdList.indexOf(this.localCusId.toString()) + 1;
          this.localCusId = this.MyCusIdList[index];
          window.sessionStorage.setItem("CusId", this.localCusId);
          this.$router.push({
            path: `/myCusEdit`,
            query: { CusId: this.localCusId, addatbn: "MyCusEntrance" },
          });
          this.getEditCus();
          this.getLiuZhuanNote();
        } else if (
          this.MyCusIdList.indexOf(this.localCusId.toString()) != -1 &&
          this.MyCusIdList.indexOf(this.localCusId.toString()) + 1 ==
            this.MyCusIdList.length
        ) {
          //当前客户ID存在于本地存储的表中且是数组中最后一个客户
          this.$message.error("当前客户为本页最后一个客户！");
        } else {
          //说明id表变更 需要进入新客户列表的第一个客户
          this.$confirm(
            "您查询的客户列表已改变，即将进入新客户列表的第一个客户？",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              this.localCusId = this.MyCusIdList[0];
              window.sessionStorage.setItem("CusId", this.localCusId);
              this.$router.push({
                path: `/myCusEdit`,
                query: { CusId: this.localCusId, addatbn: "MyCusEntrance" },
              });
              this.getEditCus();
              this.getLiuZhuanNote();
            })
            .catch(() => {
              this.$message({ type: "info", message: "已取消" });
            });
        }
      } else {
        this.$message.error("当前客户为本页最后一个客户");
      }
    },
    NextReCus() {
      if (this.ReCusIdList) {
        //判断当前客户ID是否存在于本地存储的表中 && 不是数组中最后一个客户
        if (
          this.ReCusIdList.indexOf(this.localCusId.toString()) != -1 &&
          this.ReCusIdList.indexOf(this.localCusId.toString()) + 1 !=
            this.ReCusIdList.length
        ) {
          let index = this.ReCusIdList.indexOf(this.localCusId.toString()) + 1;
          this.localCusId = this.ReCusIdList[index];
          this.getEditCus();
          this.getLiuZhuanNote();
        } else if (
          this.ReCusIdList.indexOf(this.localCusId.toString()) != -1 &&
          this.ReCusIdList.indexOf(this.localCusId.toString()) + 1 ==
            this.ReCusIdList.length
        ) {
          //当前客户ID存在于本地存储的表中且是数组中最后一个客户
          this.$message.error("当前客户为本页最后一个客户！");
        } else {
          //说明id表变更 需要进入新客户列表的第一个客户
          this.$confirm(
            "您查询的客户列表已改变，即将进入新客户列表的第一个客户？",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              this.localCusId = this.ReCusIdList[0];
              this.getEditCus();
              this.getLiuZhuanNote();
            })
            .catch(() => {
              this.$message({ type: "info", message: "已取消" });
            });
        }
      } else {
        this.$message.error("当前客户为本页最后一个客户");
      }
    },
  },
  filters: {
    formatTime(value) {
      return moment(value).format("YY-MM-DD HH:mm:ss");
    },
    JudgeBoolean(value) {
      if (value == false) {
        return "无";
      } else if (value == true) {
        return "有";
      } else {
        return "未填写";
      }
    },
    panDuanCity(val) {
      if (val == "其他") {
        return this.formLabelAlign.originalCity;
      } else {
        return val;
      }
    },
    phoneNum(val) {
      let id = window.sessionStorage.getItem("id");
      if (id == "1615") return val;
      // window.console.log(this.currentUser)

      if (val != null) {
        return val.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3");
      } else {
        return "";
      }
    },
    phoneFeiKong(val) {
      if (val != null) {
        return val;
      } else {
        return "";
      }
    },
    fenPeiWay(val) {
      if (val == 0) {
        return "该客户被系统分配给";
      } else if (val == 1) {
        return "该客户被手动分配给";
      } else if (val == 2) {
        return "该客户被加入";
      } else if (val == 3) {
        return "该客户被系统抓取至公共池";
      } else {
        return "";
      }
    },
    cuoZuoRen(val) {
      if (val != null) {
        return "操作人" + val;
      } else {
        return "";
      }
    },
    panDuanAge(val) {
      if (val > 0) {
        return val + "岁";
      } else {
        return "";
      }
    },
  },
  created() {
    this.loading = true;
    this.currentUser.currentName = window.sessionStorage.getItem("name");
    this.currentUser.currentid = window.sessionStorage.getItem("id");
    this.currentUser.currentLevel = window.sessionStorage.getItem("userLevel");
    if (this.$route.query.CusId) {
      this.localCusId = this.$route.query.CusId;
    } else {
      this.localCusId = window.sessionStorage.getItem("CusId");
    }
    if (this.$route.query.addatbn) {
      if (this.$route.query.addatbn == "true") {
        // console.log("已识别这是再分配客户的编辑页面");
        this.showaddMyCus = true;
        this.OnlyShowMyCus = false;
      } else if (this.$route.query.addatbn == "MyCusEntrance") {
        this.OnlyShowMyCus = true;
        this.showaddMyCus = false;
      } else {
        this.showaddMyCus = false;
        this.OnlyShowMyCus = false;
      }
    } else {
      //识别这是再分配客户的编辑页面
      // let addatbn = window.sessionStorage.getItem(this.$route.path.split('/')[2]);
      let addatbn = window.sessionStorage.getItem("addatbn");
      if (addatbn == "true") {
        this.showaddMyCus = true;
        this.OnlyShowMyCus = false;
      } else if (addatbn == "MyCusEntrance") {
        this.OnlyShowMyCus = true;
        this.showaddMyCus = false;
      } else {
        this.showaddMyCus = false;
        this.OnlyShowMyCus = false;
      }
    }
    //获取存在本地的客户id的表 并做非空判断
    this.MyCusIdList = window.sessionStorage.getItem("MyCusIdList");
    this.ReCusIdList = window.sessionStorage.getItem("ReCusIdList");
    if (!this.MyCusIdList) {
      this.MyCusIdList = [];
    } else {
      this.MyCusIdList = this.MyCusIdList.split(",");
    }
    if (!this.ReCusIdList) {
      this.ReCusIdList = [];
    } else {
      this.ReCusIdList = this.ReCusIdList.split(",");
    }
    if (this.localCusId == null) {
      this.$message.error("网络异常，获取用户数据失败，请稍后尝试/(ㄒoㄒ)/~~");
    } else {
      this.getEditCus();
    }
    this.getLiuZhuanNote();
  },
  activated() {
    this.loading = true;
    //切回组件的时候执行 只刷新数据，不改变整体的缓存
    this.currentUser.currentName = window.sessionStorage.getItem("name");
    this.currentUser.currentid = window.sessionStorage.getItem("id");
    this.localCusId = this.$route.query.CusId;
    if (this.$route.query.CusId) {
      this.localCusId = this.$route.query.CusId;
    } else {
      this.localCusId = window.sessionStorage.getItem("CusId");
      this.$message.success("请继续编辑");
    }
    if (this.$route.query.addatbn) {
      if (this.$route.query.addatbn == "true") {
        // console.log("已识别这是再分配客户的编辑页面");
        this.showaddMyCus = true;
        this.OnlyShowMyCus = false;
      } else if (this.$route.query.addatbn == "MyCusEntrance") {
        this.OnlyShowMyCus = true;
        this.showaddMyCus = false;
      } else {
        this.showaddMyCus = false;
        this.OnlyShowMyCus = false;
      }
    } else {
      let addatbn = window.sessionStorage.getItem("addatbn");
      if (addatbn == "true") {
        // console.log("已识别这是再分配客户的编辑页面");
        this.showaddMyCus = true;
        this.OnlyShowMyCus = false;
      } else if (addatbn == "MyCusEntrance") {
        this.OnlyShowMyCus = true;
        this.showaddMyCus = false;
      } else {
        this.showaddMyCus = false;
        this.OnlyShowMyCus = false;
      }
    }
    //获取存在本地的客户id的表 并做非空判断
    this.MyCusIdList = window.sessionStorage.getItem("MyCusIdList");
    this.ReCusIdList = window.sessionStorage.getItem("ReCusIdList");
    if (!this.MyCusIdList) {
      this.MyCusIdList = [];
    } else {
      this.MyCusIdList = this.MyCusIdList.split(",");
    }
    if (!this.ReCusIdList) {
      this.ReCusIdList = [];
    } else {
      this.ReCusIdList = this.ReCusIdList.split(",");
    }
    //获取客户信息
    this.getEditCus();
    this.getLiuZhuanNote();
  },
};
</script>

<style  lang='scss'>
.myCusEdit-container {
  ul {
    list-style: none;
    padding-left: 20px;
    li {
      line-height: 20px;
      width: 100%;
      color: #708090;
    }
  }
  // 信息展示部分样式
  .el-row {
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    line-height: 35px;
  }
  .bg-purple-dark {
    background: #bcc4ce;
  }
  .bg-purple {
    background: #eff1f3;
  }
  .miaoshu {
    text-align: center;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .content {
    padding-left: 20px;
  }
  .grid-content {
    min-height: 36px;
    border-bottom: 1px solid grey;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .col-first {
    margin-left: 20px;
  }
  .col-last {
    margin-right: 20px;
  }
  .row-last {
    margin-bottom: 30px;
  }
  .row-first {
    margin-top: 30px;
  }
  input.el-input__inner {
    width: 170px;
    height: 32px;
    padding-left: 10px;
  }
  input.el-input__inner#nameInput {
    padding: 0;
    // border:0;
    color: #000;
  }
  // 时间分类框样式
  .teamCusEdit-container input.el-input__inner#againkinds,
  .teamCusEdit-container input.el-input__inner#againtime {
    width: 85px;
    padding-left: 7px;
  }

  // 日期选择器
  daterange.el-input,
  .el-date-editor--daterange.el-input__inner,
  .el-date-editor--timerange.el-input,
  .el-date-editor--timerange.el-input__inner {
    width: 240px;
    height: 36px;
    vertical-align: middle;
    .el-date-editor .el-range__icon {
      line-height: 27px;
    }
    .el-date-editor .el-range-separator {
      width: 5%;
    }
  }
  .el-form-item {
    display: inline-block;
    margin-left: 10px;
    margin-top: 15px;
  }
  .el-form-item:nth-child(n + 6) {
    margin-top: 0;
  }
  .el-select.time {
    margin-left: 20px;
  }
  .el-input--suffix .el-input__inner.fanwei {
    padding-right: 30px;
    width: 30px;
  }
  .filterCondition {
    background-color: #fff;
    margin-bottom: 10px;
    #addnote {
      line-height: 0.5;
      margin-left: 10px;
    }
    #noteList {
      width: 712px;
      // height: 160px;
      display: inline-block;
      vertical-align: top;
      border-radius: 5px;
      border: 1px solid #dcdfe6;
      background-color: #f5f7fa;
    }
    #liuZhuanNote {
      width: 712px;
      // height: 160px;
      display: inline-block;
      vertical-align: top;
      border-radius: 5px;
      border: 1px solid #dcdfe6;
      background-color: #f5f7fa;
    }
    /deep/.addbeizhu {
      margin-left: 20px !important;
    }
  }
  .filterCondition.downOne {
    padding-bottom: 30px;
  }
  .zaifenCheck {
    margin-left: 20px;
  }
  .zaifenBth.el-button {
    padding: 10px 20px;
  }
  /deep/ #dateOfBirth .el-input__inner {
    width: 172px !important;
    padding-left: 30px;
  }
  .redistribution-container input.el-input__inner {
    width: 182px;
    height: 32px;
    padding-left: 10px;
  }
  #name .el-form-item__label {
    width: 43px;
  }
  .benhangye {
    display: inline-block;
    vertical-align: top;
    /deep/ .el-form-item__content {
      margin-left: 10px !important;
    }
    #hangyejingyan {
      display: flex;
      margin: 0;

      .el-form-item__label {
        width: 115px;
      }
    }
  }
  .momecontent {
    /deep/ .el-form-item__content {
      margin-left: 20px !important;
      .el-input__inner {
        width: 500px;
      }
    }
  }
  //跟进记录
  #genjinjilu,
  #zizhicontent {
    width: 712px;
    height: 100px;
  }
  // 从业年限
  .nianxian {
    margin-left: 10px;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 182px;
  }
  //文本域
  .el-textarea {
    width: 712px;
  }
}
</style>